<template>
  <main>
    <div class="menu-edit-box">
      <el-tree :data="state.menuList" draggable default-expand-all node-key="C_id" @node-drag-end="handleDragEnd"
        @node-drop="handleDrop" :props="state.props" />
    </div>
    <div>
      <el-table :data="state.menuConifgAry" :fit="true" style="width: 100%">
        <el-table-column prop="rolename" label="角色名称">
        </el-table-column>
        <el-table-column prop="role" width="300" label="角色编号">
        </el-table-column>
        <el-table-column prop="member" width="180" label="成员">
        </el-table-column>
      </el-table>
    </div>
  </main>
</template>

<script setup lang="ts">
import axios from "axios"
import { useRoute } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import { menuStorePinia } from '@/stores/currentMenu';
import type {
  AllowDropType,
  NodeDropType,
} from 'element-plus/es/components/tree/src/tree.type'

const menuStore = menuStorePinia()
const route = useRoute()

let state = reactive({
  menuList: [],
  menuConifgAry: [],
  props: {
    label: "menuName",
    children: "children"
  }
})

/*获取菜单数据*/
axios.post("/api/getmenu", {
})
  .then(response => {
    let data = response.data;
    if (data.code == "200") {
      state.menuList = data.data;
      console.log(state.menuList)
    } else {
      alert("菜单查询出错！");
    }
  })
  .catch(error => {
    alert((error.response && error.response.data.message) || "系统错误");
    // router.push({path:"/login"});
  });

//拖拽结束时（可能未成功）触发的事件
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvent
) => {
  // console.log('tree drag end:', dropNode && dropNode.label, dropType)
}
//拖拽成功完成时触发的事件
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvent
) => {
  // console.log('tree drop:', dropNode.label, dropType)
}

</script>

<style scoped>
main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 600px auto;
}

.menu-edit-box {
  padding: 20px;
  max-width: 600px;
}
</style>